<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/data.js"></script>
</head>
<body>
<div id="div1" class="row">
    <div class="col-lg-12">
        <table class="table table-striped table-hover table-bordered">
            <thead>
            <tr>
                <th>
                    <label><input type="checkbox" v-model="selAll">全选</label>
                </th>
                <th v-for="(val,key) in this.d[0]" :key="key">{{key}}</th>
                <th>
                    <button class="btn bg-info" @click="handlerAdd">添加</button>
                </th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th>
                    <label><input type="checkbox" v-model="selAll">全选</label>
                </th>
                <th v-for="(val,key) in this.d[0]" :key="key">{{key}}</th>
                <th>
                    <button class="btn bg-warning" @click="handlerDels">批量删除</button>
                </th>
            </tr>
            </tfoot>
            <tbody>
            <tr v-for="(item,index) in this.d" :key="index">
                <td><input type="checkbox" v-model="item.pid"></td>
                <td v-for="(val,key) in item" :key="key">{{val}}</td>
                <td>
                    <button class="btn bg-danger" @click="handlerDel($event,index)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        //元素
        el: '#div1',
        //数据
        data: {
            d: null,
            selAll: false
        },
        //生命周期钩子
        created() {
            this.d = s.data;
            console.log(this.d)
        },
        mounted() {

        },
        beforeDestroy() {
        },
        //计算属性
        computed: {},
        //过滤
        filters: {},
        //监听
        watch: {},
        //事件
        methods: {
            handlerAdd() {
                this.d.push({
                    "id": null,
                    "name": null,
                    "pwd": null,
                    "description": null,
                    "pid": null,
                    "photo": null
                })
            },
            handlerDel(e, index) {
                this.d.splice(index, 1);
            },
            handlerDels() {
                for (let i = this.d.length - 1; i >= 0; i--) {
                    if (this.d[i].pid) {
                        this.d.splice(i, 1);
                    }
                }
            }
        }
    })
</script>
</body>
</html>